<template>
  <div class="legend-main" :style="styles">
    <!--全国风险区划图数据-->
    <div v-if="props.type == 1">
      <div class="assy">
        <ComLegend title="图例" subTitle="" :items="legendItems" :items-per-column="10"></ComLegend>
        <el-form>
          <el-form-item label="评估方式">
            <el-radio-group v-model="params.way" @change="getResult" class="radio1">
              <el-radio v-for="(item, index) in statisticalOptions" :key="index" :label="item.value">
                {{ item.name }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="评估对象">
            <el-radio-group v-model="params.type" @change="getResult" class="radio1">
              <el-radio v-for="(item, index) in Evaluation" :key="index" :label="item.value">
                {{ item.name }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="params.way == '1'" label="设定烈度">
            <el-radio-group v-model="params.result" @change="getResult" class="radio1">
              <el-radio v-for="(item, index) in scenarioEarthquake" :key="index" :label="item.value">
                {{ item.name }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!--全国承灾体数据-->
    <div v-if="type == 2">
      <!-- <ComLegend :title="legendTitle1" subTitle="" :items="legendItems1" :items-per-column="10"></ComLegend> -->
      <MutilLegend :titles="legendTitle1" :items="legendItems1" :items-per-column="5"></MutilLegend>
    </div>
    <!--全国地质灾害-->
    <div v-if="type == 3">
      <ComLegend :title="'图例'" :items="legendItems2" :items-per-column="5"></ComLegend>
    </div>
    <!--全国风险评估-->
    <div v-if="props.type == 4">
      <div class="assy">
        <ComLegend1 :title="legendTitle3" subTitle="" :items="legendItems3" :items-per-column="10"></ComLegend1>
        <!-- <el-form>
          <el-form-item label="评估方式">
            <el-radio-group v-model="params3.way" @change="getResult3" class="radio1">
              <el-radio v-for="(item, index) in statisticalOptions1" :key="index" :label="item.name">
                {{ item.name }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="评估对象">
            <el-radio-group v-model="params3.type" @change="getResult3" class="radio1">
              <el-radio v-for="(item, index) in Evaluation1" :key="index" :label="item.name">
                {{ item.name }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="设定地震">
            <el-radio-group v-model="params3.result" @change="getResult3" class="radio1">
              <el-radio v-for="(item, index) in scenarioEarthquake1" :key="index" :label="item.name">
                {{ item.name }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form> -->
      </div>
    </div>
    <!--全国重点目标-->
    <div v-if="props.type == 5">
      <div class="row">
        <div class="class4-legend"></div>
        <div class="class4">重点目标</div>
        <ComLegend title="图例" subTitle="" :items="legendItems" :items-per-column="10"></ComLegend>
      </div>
    </div>
    <!--断层-->
    <div v-if="props.type == 6">
      <MutilLegend :titles="legendTitle5" :items="legendItems5" :items-per-column="4"></MutilLegend>
    </div>
    <!--危险性等级区划-->
    <div v-if="props.type == 7">
      <ComLegend title="图例" subTitle="危险性等级" :items="legendItems6" :items-per-column="10"></ComLegend>
    </div>
  </div>
</template>
<script setup>
import ComLegend from './ComLegend';
import ComLegend1 from './ComLegend1';
import MutilLegend from './MutilLegend';
const props = defineProps({
  type: {
    type: Number,
    default: 1,
  },
  typeName: {
    type: String,
    default: '',
  },
  num2: {
    type: Number,
    default: 0,
  },
  legendData: {
    type: Array,
    default: () => [],
  },
  legendTitle: {
    type: String,
    default: '图例',
  },
  styles: {
    required: false,
    type: Object,
    default: {
      position: 'absolute',
      bottom: '15%',
      left: '42px',
    },
  },
});
const emit = defineEmits(['optionSelected']);
const data = reactive({
  params: {
    way: 1,
    type: 1,
    result: 1,
  },
  params3: {
    way: '人员受伤',
    type: '50年发生概率',
    result: '轻微破坏',
  },
});
const { params, params3 } = toRefs(data);
const legendTitle1 = [
  { title: '建筑物公里网格', subTitle: '' },
  { title: '单位:平方米/平方公里', subTitle: '' },
];
const legendTitle3 = ref('单位：人');
const legendTitle5 = ref([
  { title: '图例', subTitle: '' },
  { title: '断层数量（条）', subTitle: '' },
]);
const legendItems = ref([
  { label: 'I级', color: 'rgba(175,29,81)' },
  { label: 'II级', color: 'rgba(253,8,124)' },
  { label: 'III级', color: 'rgba(240,110,151)' },
  { label: 'IV级', color: 'rgba(244,179,200)' },
  { label: 'V级', color: 'rgba(250,204,204)' },
]);
const legendItems1 = ref([
  // { label: '钢结构', color: 'rgba(162,16,71)' },
  // { label: '钢筋混凝土结构', color: 'rgba(230,14,76)' },
  // { label: '砌体结构/砖石结构', color: 'rgba(235,83,131)' },
  // { label: '木结构', color: 'rgba(242,146,178)' },
  // { label: '其他结构', color: 'rgba(245, 193, 210)' },
  // { label: '10-31', color: 'rgb(246, 216, 255)' },
  // { label: '31-60', color: 'rgb(237, 177, 255)' },
  // { label: '61-100', color: 'rgb(227, 133, 255)' },
  // { label: '101-600', color: 'rgb(217, 90, 255)' },
  // { label: '601-1200', color: 'rgb(207, 46, 255)' },
  // { label: '1201-5000', color: 'rgb(196, 0, 255)' },
  // { label: '5001-15000', color: 'rgb(169, 0, 219)' },
  // { label: '15001-28000', color: 'rgb(136, 0, 185)' },
  // { label: '28000以上', color: 'rgb(114, 0, 148)' },
  { name: '0', color: 'rgb(246, 216, 255)', sort: 1 },
  { name: '0-0.1', color: 'rgb(240, 190, 255)', sort: 3 },
  { name: '0.1-0.5', color: 'rgb(234, 166, 255)', sort: 5 },
  { name: '0.5-1', color: 'rgb(227, 136, 255)', sort: 7 },
  { name: '1-5', color: 'rgb(220, 103, 255)', sort: 9 },
  { name: '5-10', color: 'rgb(211, 65, 255)', sort: 11 },
  { name: '10-30', color: 'rgb(203, 30, 255)', sort: 13 },
  { name: '30-50', color: 'rgb(196, 0, 255)', sort: 15 },
  { name: '50-100', color: 'rgb(179, 0, 233)', sort: 2 },
  { name: '100-200', color: 'rgb(162, 0, 211)', sort: 4 },
  { name: '200-500', color: 'rgb(141, 0, 183)', sort: 6 },
  { name: '500-800', color: 'rgb(125, 0, 162)', sort: 8 },
  { name: '800-1200', color: 'rgb(108, 0, 140)', sort: 10 },
  { name: '1200-2000', color: 'rgb(84, 0, 109)', sort: 12 },
  { name: '2000以上', color: 'rgb(61, 0, 79)', sort: 14 },
]);
const legendItems2 = ref([
  { label: '极低危险', color: 'rgba(118,183,74,1)' },
  { label: '低危险', color: 'rgba(173,217,83,1)' },
  { label: '中危险', color: 'rgba(255,253,97,1)' },
  { label: '高危险', color: 'rgba(241,158,75,1)' },
  { label: '极高危险', color: 'rgba(234,72,63,1)' },
]);
const legendItems3 = ref([
  { label: '0', color: 'rgba(242,242,242)' },
  { label: '0-1', color: 'rgba(251,197,153)' },
  { label: '1-5', color: 'rgba(246,159,103)' },
  { label: '5-10', color: 'rgba(241,147,101)' },
  { label: '10-20', color: 'rgba(224,116,75)' },
  { label: '20-50', color: 'rgba(235,112,55)' },
  { label: '50-100', color: 'rgba(198,112,91)' },
  { label: '100-500', color: 'rgba(163,103,104)' },
  { label: '500以上', color: 'rgba(136,95,95)' },
]);
const legendItems5 = [
  { label: '全新世', color: 'rgba(255,37,37,1)', w: 15, h: 4, r: 10 },
  { label: '晚更新世', color: 'rgba(227,46,255,1)', w: 15, h: 4, r: 10 },
  { label: '早中更新世', color: 'rgba(37,255,130,1)', w: 15, h: 4, r: 10 },
  { label: '前第四纪', color: 'rgba(253,190,65,1)', w: 15, h: 4, r: 10 },
  { label: '>300', color: 'rgba(26,66,194,1)', w: 15, h: 8, r: 0 },
  { label: '150-300', color: 'rgba(48, 96, 255, 1)', w: 15, h: 8, r: 0 },
  { label: '50-150', color: 'rgba(95, 133, 255, 1)', w: 15, h: 8, r: 0 },
  { label: '0-50', color: 'rgba(146, 160, 240, 1)', w: 15, h: 8, r: 0 },
];
const legendItems6 = ref([
  { label: '1级', color: 'rgba(162,16,71)' },
  { label: '2级', color: 'rgba(230,14,76)' },
  { label: '3级', color: 'rgba(235,83,131)' },
  { label: '4级', color: 'rgba(242,146,178)' },
]);
const statisticalOptions = ref([
  { name: '确定评估', value: 1 },
  { name: '概率评估', value: 2 },
]);
const Evaluation = ref([
  { name: '倒塌风险', value: 1 },
  { name: '人员伤亡', value: 2 },
  { name: '经济损失', value: 3 },
]);
const scenarioEarthquake = ref([
  { name: 'VI度', value: 1 },
  { name: 'VII度', value: 2 },
  { name: 'VIII度', value: 3 },
  { name: 'IX度', value: 4 },
  { name: 'X度', value: 5 },
]);
const statisticalOptions1 = ref([
  { name: '人员受伤', value: 1 },
  { name: '人员死亡', value: 2 },
  { name: '经济损失', value: 3 },
]);
const Evaluation1 = ref([{ name: '50年发生概率', value: 1 }]);
const scenarioEarthquake1 = ref([
  { name: '轻微破坏', value: 1 },
  { name: '中等破坏', value: 2 },
  { name: '严重破坏', value: 3 },
  { name: '毁坏', value: 4 },
]);
watch(
  () => props.num2,
  (newVal) => {
    if (props.type == 3) {
      if (newVal == 1 || newVal == 2) {
        //地震滑坡和砂土液化的图例
        legendItems2.value = [
          { label: '极低危险', color: 'rgba(118,183,74,1)' },
          { label: '低危险', color: 'rgba(173,217,83,1)' },
          { label: '中危险', color: 'rgba(255,253,97,1)' },
          { label: '高危险', color: 'rgba(241,158,75,1)' },
          { label: '极高危险', color: 'rgba(234,72,63,1)' },
        ];
      } else {
        legendItems2.value = [
          { label: '不震陷', color: 'rgba(118,183,74,1)' },
          { label: '震陷', color: 'rgba(241,158,75,1)' },
        ];
      }
    }
  }
);
watch(
  () => props.type,
  (newVal) => {
    console.log('type--', newVal);
    if (newVal == 4 || newVal == 1) {
      params.value = {
        way: 1,
        type: 1,
        result: 3,
      };
      params3.value = {
        way: '人员受伤',
        type: '50年发生概率',
        result: '轻微破坏',
      };
      // legendTitle3.value = '50年发生概率-人员受伤风险';
      // legendItems3.value = [
      //   { label: '0', color: 'rgba(242,242,242)' },
      //   { label: '0-1', color: 'rgba(251,197,153)' },
      //   { label: '1-5', color: 'rgba(246,159,103)' },
      //   { label: '5-10', color: 'rgba(241,147,101)' },
      //   { label: '10-20', color: 'rgba(224,116,75)' },
      //   { label: '20-50', color: 'rgba(235,112,55)' },
      //   { label: '50-100', color: 'rgba(198,112,91)' },
      //   { label: '100-500', color: 'rgba(163,103,104)' },
      //   { label: '500以上', color: 'rgba(136,95,95)' },
      // ];
    }
  }
);
watch(
  () => props.typeName,
  (newVal) => {
    console.log('type--', newVal);
    if (newVal == '受伤' || newVal == '死亡') {
      if (newVal == '受伤') {
        legendTitle3.value = '50年发生概率-人员受伤风险';
      }else{
        legendTitle3.value = '50年发生概率-人员死亡风险';
      }
      legendItems3.value = [
        { label: '0', color: 'rgba(242,242,242)' },
        { label: '0-1', color: 'rgba(251,197,153)' },
        { label: '1-5', color: 'rgba(246,159,103)' },
        { label: '5-10', color: 'rgba(241,147,101)' },
        { label: '10-20', color: 'rgba(224,116,75)' },
        { label: '20-50', color: 'rgba(235,112,55)' },
        { label: '50-100', color: 'rgba(198,112,91)' },
        { label: '100-500', color: 'rgba(163,103,104)' },
        { label: '500以上', color: 'rgba(136,95,95)' },
      ];
    }else if(newVal == '经济'){
      legendTitle3.value = '50年发生概率-直接经济损失风险';
      legendItems3.value = [
        { label: '0', color: 'rgba(242,242,242)' },
        { label: '0-500', color: 'rgba(251,197,153)' },
        { label: '500-2000', color: 'rgba(246,159,103)' },
        { label: '2000-5000', color: 'rgba(241,147,101)' },
        { label: '5000-10000', color: 'rgba(224,116,75)' },
        { label: '10000-20000', color: 'rgba(235,112,55)' },
        { label: '20000以上', color: 'rgba(198,112,91)' },
      ];
    }else{
      legendTitle3.value = '50年发生概率-建筑倒塌风险';
      legendItems3.value = [
        { label: '0-0.3', color: 'rgba(251,197,153)' },
        { label: '0.3-0.6', color: 'rgba(246,159,103)' },
        { label: '0.6-0.7', color: 'rgba(241,147,101)' },
        { label: '0.7-0.8', color: 'rgba(224,116,75)' },
        { label: '0.8-0.9', color: 'rgba(163,103,104)' },
        { label: '0.9-1.0', color: 'rgba(136,95,95)' },
      ];
    }
  }
);
// ---type=0---
const getResult = () => {
  console.log('type0---', params.value);
  emit('optionSelected', params.value);
};
// ---type=3---
const getResult3 = () => {
  console.log('type3---', params3.value);
  if (params3.value.way == '人员死亡' || params3.value.way == '人员受伤') {
    legendTitle3.value = '50年发生概率-人员受伤风险';
    legendItems3.value = [
      { label: '0', color: 'rgba(242,242,242)' },
      { label: '0-1', color: 'rgba(251,197,153)' },
      { label: '1-5', color: 'rgba(246,159,103)' },
      { label: '5-10', color: 'rgba(241,147,101)' },
      { label: '10-20', color: 'rgba(224,116,75)' },
      { label: '20-50', color: 'rgba(235,112,55)' },
      { label: '50-100', color: 'rgba(198,112,91)' },
      { label: '100-500', color: 'rgba(163,103,104)' },
      { label: '500以上', color: 'rgba(136,95,95)' },
    ];
  } else {
    legendTitle3.value = '单位：万元';
    legendItems3.value = [
      { label: '0', color: 'rgba(242,242,242)' },
      { label: '0-500', color: 'rgba(251,197,153)' },
      { label: '500-2000', color: 'rgba(246,159,103)' },
      { label: '2000-5000', color: 'rgba(241,147,101)' },
      { label: '5000-10000', color: 'rgba(224,116,75)' },
      { label: '10000-20000', color: 'rgba(235,112,55)' },
      { label: '20000以上', color: 'rgba(198,112,91)' },
    ];
  }
  emit('optionSelected', params3.value);
};
</script>
<style scoped lang="scss">
.row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.legend-main {
  padding: 15px 14px 15px 11px;
  display: flex;
  flex-direction: column;
  min-width: 120px;
  background: rgba(48, 96, 255, 0.15);
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  border: 1px solid #0190f9;
}
.assy {
  color: #fff;
  display: flex;
  flex-direction: row;
  .el-form-item {
    display: block;
    font-size: 14px;
    position: relative;
    padding-left: 8px;
    margin-bottom: 5px;
    &::before {
      content: '';
      display: block;
      width: 3px;
      height: 15px;
      background: #fff;
      position: absolute;
      top: 8px;
      left: 0;
    }
    :deep(.el-form-item__label) {
      display: block;
      color: #fff;
      font-size: 14px;
      font-weight: 400;
      text-align: left;
    }
    /* &:last-child {
      &::before {
        display: none;
      }
    } */
    .el-radio {
      margin: 4px 0;
      padding-left: 12px;
      color: #fff;
      font-size: 14px;
    }
    .radio1 {
      display: flex;
      width: 100%;
      .el-radio {
        width: calc(100% / 3);
      }
    }
    .radio2 {
      display: flex;
      flex-wrap: wrap;
      .el-radio {
        width: 50%;
        margin: 0;
      }
    }
  }
  :deep(.el-radio__label) {
    font-size: 14px;
  }
  :deep(.el-slider) {
    width: 370px;
    margin: 24px auto 10px;
    .el-slider__runway {
      height: 20px;
      // background: linear-gradient(#1D388F 0%, #0B1864 53%, #1D388F 100%);
      background: #000535;
      border-radius: 0;
      opacity: 1;
      border: 1px solid #46ffff;

      .el-slider__bar {
        margin: 0 10px 0 3px;
        top: 5px;
        height: 10px;
        background: url('@/assets/images/intensity/slider-bar.png') repeat-x;
      }

      .el-slider__button-wrapper {
        top: 0;
        height: 100%;

        .el-slider__button {
          margin-top: -7px;
          margin-left: 8px;
          width: 17px;
          height: 34px;
          background: url('@/assets/images/disaterLosses/slider-arrow.png') no-repeat center;
          background-size: 100% 100%;
          border: none;
          border-radius: 0;
          margin-bottom: -2px;
        }
      }
    }

    .el-slider__marks {
      .el-slider__marks-text {
        margin-top: -28px;
        color: #dffaff;
        font-size: 14px;
      }
    }

    .el-slider__stop {
      display: none;
    }
  }
  .searchBox {
    width: 100%;
    display: flex;
    justify-content: right;
  }
  .searchZoning {
    width: 60px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    border: 1px solid #46ffff;
    span {
      width: 32px;
      height: 16px;
      font-size: 16px;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      font-weight: 400;
      color: #46ffff;
      line-height: 14px;
      -webkit-text-stroke: 1px rgba(0, 0, 0, 0);
    }
  }
}
.class4 {
  font-size: 14px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  line-height: 23px;
  margin-right: 20px;
}
.class4-legend {
  width: 15px;
  height: 8px;
  background: blue;
  margin-right: 10px;
}
</style>
